<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main">

        <div style="margin-top:5px">
            <button class="layui-btn layui-btn-sm data-add-btn"> 添加存档 </button>
            <button id="cluster_upload_real"  style="display: none;">上传存档, 用于表格里面的上传存档回调，隐藏</button>
        </div>

        <table class="layui-hide" id="clusterTable" lay-filter="clusterTableFilter"></table>

        <script type="text/html" id="clusterTableBar">
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="editCluster">编辑</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="editMaster">地表</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="editCaves">洞穴</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="editMods">MOD</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="blacklist">黑名单</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="whitelist"">白名单</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="adminlist">管理员</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="uploadCluster" title="上传存档(仅覆盖地表和洞穴存档及相关配置)">上传</a>
                <a class="layui-btn layui-btn-sm data-count-edit" lay-event="loadLog">日志</a>
                <a class="layui-btn layui-btn-sm layui-btn-normal data-count-edit" lay-event="startCluster">启动</a>
                <a class="layui-btn layui-btn-sm layui-btn-warm data-count-edit" lay-event="stopCluster">停止</a>
                <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="deleteCluster">删除</a>
            </div>
        </script>
    </div>
</div>

<script>
    layui.use(['form', 'table','layuimini', 'upload', 'readClusterLog', 'clusterEditor'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            upload = layui.upload,
            readClusterLog = layui.readClusterLog,
            clusterEditor = layui.clusterEditor,
            layuimini = layui.layuimini;

        window.clusterTable = table.render({
            elem: '#clusterTable',
            url: 'api/cluster_table.json',
            // toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            cols: [[
                { field: 'id', title: '存档ID', },
                { field: 'cluster_name', title: '房间名', },
                { field: 'game_mode', title: '游戏模式', },
                // { field: 'max_players', title: '最大玩家数量', },
                // { field: 'pvp', title: '是否开启PvP', },
                { field: 'runningStatus', title: '运行状态', },
                { title: '操作',  templet: '#clusterTableBar', width: 620, fixed: "right", align: "center"}
            ]],
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {
            clusterEditor.showAdd();
        });
        table.on('tool(clusterTableFilter)', function (obj) {
            if ('editCluster' == obj.event) {
                clusterEditor.showEdit(obj.data.id);
            } else if ('blacklist' == obj.event) {
                clusterEditor.blacklist(obj.data.id);
            } else if ('whitelist' == obj.event) {
                clusterEditor.whitelist(obj.data.id);
            } else if ('adminlist' == obj.event) {
                clusterEditor.adminlist(obj.data.id);
            } else if ('editMaster' == obj.event) {
                clusterEditor.masterEdit(obj.data.id);
            } else if ('editCaves' == obj.event) {
                clusterEditor.cavesEdit(obj.data.id);
            } else if ('editMods' == obj.event) {
                clusterEditor.modsEdit(obj.data.id);
            } else if ('uploadCluster' == obj.event) {
                cur_clusterId = obj.data.id;
                $('#cluster_upload_real').click();
            } else if ('loadLog' == obj.event) {
                // 查看日志，用的layui的模块定义方式写的，因为要做到日志内容实时更新，写在这里太臃肿了
                readClusterLog.show(obj.data.id);
            } else if ('startCluster' == obj.event) {
                var loadIndex = layer.load();
                $.ajax({
                    url: '/api/start_cluster',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        cluster_id: obj.data.id
                    },
                    success: function (data) {
                        layer.close(loadIndex);
                        layer.msg(data.msg);
                        clusterTable.reload();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        layer.close(loadIndex);
                        layer.open({
                            title: '提示',
                            content: '糟糕，出问题了。'
                        });
                    }
                })
            } else if ('stopCluster' == obj.event) {
                if (!obj.data.runningStatus) {
                    layer.msg('当前存档未启动。')
                    return;
                }
                var loadIndex = layer.load();
                $.ajax({
                    url: '/api/stop_cluster',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        cluster_id: obj.data.id
                    },
                    success: function (data) {
                        layer.close(loadIndex);
                        layer.msg(data.msg);
                        clusterTable.reload();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        layer.close(loadIndex);
                        layer.open({
                            title: '提示',
                            content: '糟糕，出问题了。'
                        });
                    }
                })
            } else if ('deleteCluster' == obj.event) {
                layer.open({
                    title: '提示',
                    btn: ['确定', '取消'],
                    content: '是否删除存档[' + obj.data.id + ']？',
                    yes: function (index, layero) {
                        var loadIndex = layer.load();
                        $.ajax({
                            url: '/api/delete_cluster',
                            type: 'POST',
                            data: {
                                id: obj.data.id,
                            },
                            success: function (data) {
                                layer.close(loadIndex)
                                if (data.code) {
                                    layer.open({
                                        title: '提示',
                                        content: data.msg
                                    })
                                    return;
                                }
                                layer.msg('操作成功');
                                clusterTable.reload();
                                layer.close(index);
                            },
                            error: function (xhr) {
                                layer.close(loadIndex);
                                layer.open({
                                    title: '提示',
                                    content: '糟糕，出问题了。'
                                });
                            }
                        })                        
                    }
                })
            }
        });

        
        var cur_clusterId = null;
        var loadIndex = null;
        upload.render({
            elem: '#cluster_upload_real',
            acceptMime: 'application/zip',
            url: '/api/upload_cluster',
            exts: 'zip',
            data: {
                cluster_id: function () {
                    return cur_clusterId;
                }
            },
            before: function () {
                loadIndex = layer.load();
            },
            done: function (res, inex, upload) {
                layer.close(loadIndex);
                layer.msg(res.msg);
            },
            error: function (index, upload) {
                layer.open({
                    title: '提示',
                    content: '未知错误。'
                });
            }
        });
    });
</script>